<template>
  <div>
    <el-form :inline="true" :model="params.query" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input
          v-model="params.query.username"
          placeholder="请输入用户名称"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="reset"
          >重置</el-button
        >
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="add"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <el-table
      :data="history"
      style="width: 100%"
      border
      highlight-current-row
      :default-sort="{ prop: 'updateTime', order: 'descending' }"
    >
      <el-table-column
        type="index"
        width="50px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="用户"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="邮件"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="roles"
        label="角色"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="updateStatus(scope.row)"
            v-if="scope.row.enableFlag === 0"
            >启用</el-button
          >
          <br />
          <el-button
            type="danger"
            size="mini"
            @click="updateRow(scope.row)"
            v-if="scope.row.enableFlag === 1"
            >更新</el-button
          >
          <br />
          <el-button
            type="primary"
            size="mini"
            @click="delRow(scope.row)"
            v-if="scope.row.enableFlag === 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageNowChange"
      :current-page="params.query.pageNow"
      :page-sizes="[10, 15, 20]"
      :page-size="params.query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="params.rowCount"
    ></el-pagination>

  <!-- 新增 -->
  <add_update_user_info
      :add-dialog-visible="addDialogVisible"
      :user-info-param="userInfoParam"
      :dialog-title="addDiaglogTitle"
      :operation="addOperation"
      v-on:closeAddDialog="closeAddDialog"
      v-on:search="search"
    ></add_update_user_info>

    <!-- 更新 -->
    <add_update_user_info
      :add-dialog-visible="updateDialogVisible"
      :user-info-param="userInfoParam"
      :dialog-title="updateDiaglogTitle"
      :operation="updateOperation"
      v-on:closeAddDialog="closeAddDialog"
      v-on:search="search"
    ></add_update_user_info>

  </div>
</template>

<script>
import Constants from "@/components/util/Constants";
import GlobalUtil from "@/components/util/GlobalUtil";
import { userSearch, deleteUser } from "@/components/api/security";
import AddUpdateUserInfo from "@/components/view/security/AddUpdateUserInfo";

export default {
  name: "UserInfoConfig",
  components: {
    add_update_user_info: AddUpdateUserInfo,
  },
  data: function () {
    return {
      params: {
        query: {
          username: "",
          enableFlag: 1,
          pageSize: 10,
          pageNow: 1,
        },
      },
      userInfoParam:{
        uuid: "",
        usernmae:"",
        phone:"",
        email:""
      },
      history: [],
      addOperation: Constants.ADD_STR,
      updateOperation: Constants.UPDATE_STR,
      addDiaglogTitle: Constants.ADD,
      updateDiaglogTitle: Constants.UPDATE,
      addDialogVisible: false,
      updateDialogVisible: false,
    };
  },
  methods: {
    search: function () {
      userSearch(this.params.query, (data) => {
        if (data) {
          this.history = data.data;
          this.params.pageCount = data.pageCount;
          this.params.rowCount = data.rowCount;
        }
      });
    },
    reset: function () {
      this.params.query.username = "";
      this.search();
    },
    add: function () {
      this.addDialogVisible = true;
    },
    updateStatus: function () {},
    updateRow(row) {
      this.userInfoParam = GlobalUtil.cloneObject(row);
      this.updateDialogVisible = true;
    },
    delRow: function (row) {
      this.$confirm("确定是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(row.uuid, (data) => {
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    pageSizeChange(pageSize) {
      this.params.query.pageSize = pageSize;
      this.search();
    },
    pageNowChange(pageNow) {
      this.params.query.pageNow = pageNow;
      this.search();
    },
    closeAddDialog() { //关闭对话框，数据初始化
      this.userInfoParam = {
        uuid:"",
        usernmae: "",
        phone: "",
        email: "",
      };
      this.addDialogVisible = false;
      this.updateDialogVisible = false;
    },
  },
  mounted() {
    this.search();
  },
};
</script>
